<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
</head>
<body>
选择转码文件： <input name="file" type="file" accept="video/*" onchange="upload(event)">
<label for="urlInput"></label><input id="urlInput" placeholder="index.m3u8文件父目录">
<button onclick="play()">播放</button>
<hr/>
<video id="video"  width="500" height="400" controls="controls"></video>
</body>
<script>

    const video = document.getElementById('video');

    function play(){
        let path = document.getElementById("urlInput").value;
        video.poster = path + "/poster.jpg";
        // 渲染到播放器
        var hls = new Hls();
        hls.loadSource(path + "/index.m3u8");
        hls.attachMedia(video);
    }

    function upload (e){
        let files = e.target.files
        if (!files) {
            return
        }

        // TODO 转码配置这里固定死了
        var transCodeConfig = {
            poster: "00:00:00.001", // 截取第1毫秒作为封面
            tsSeconds: 15,
            cutStart: "",
            cutEnd: ""
        }

        // 执行上传
        let formData = new FormData();
        formData.append("file", files[0])
        formData.append("config", new Blob([JSON.stringify(transCodeConfig)], {type: "application/json; charset=utf-8"}))

        fetch('/upload', {
            method: 'POST',
            body: formData
        })
            .then(resp =>  resp.json())
            .then(message => {
                if (message.success){
                    // 设置封面
                    video.poster = message.data.poster;
                    // 渲染到播放器
                    var hls = new Hls();
                    hls.loadSource(message.data.m3u8);
                    hls.attachMedia(video);
                } else {
                    alert("转码异常，详情查看控制台");
                    console.log(message.message);
                }
            })
            .catch(err => {
                alert("转码异常，详情查看控制台");
                throw err
            })
    }
</script>
</html>
